<template>
  <div>
    <header-comm></header-comm>
 <div class="bcg">
    <div class="custom-tree-container">
      <div class="h_tit">
        <h3>产品样本创建</h3>
        <p>创建样本，可以选择样本素材库中内容</p>
      </div>
      <div class="block blockleft" style=" padding-right:200px;">
        <p>产品样本素材</p>
        <div class="xzyy">
          <span>选择语言：</span>
          <a-checkbox-group v-model="checkList">
            <a-checkbox value="中文">中文</a-checkbox>
            <a-checkbox value="英文">英文</a-checkbox>
            <a-checkbox value="日文">日文</a-checkbox>
            <a-checkbox value="俄文">俄文</a-checkbox>
          </a-checkbox-group>
        </div>
        <el-tree
          :data="data"
          ref="tree"
          :props="defaultProps"
          node-key="id"
          show-checkbox
          :expand-on-click-node="false"
           @check-change="handleCheckChange"

        ></el-tree>
        <div class="button1">
          <a-button class="btn1"   @click="getCheckedNodes" type="primary">创建样本</a-button>
          <a-button class="btn2" type="primary">追加样本</a-button>
        </div>
      </div>

      <div class="block blockright" style="padding-right:200px;">
        <p>我的产品样本</p>
        <p class="myp"></p>
        <el-tree
          :data="newData"
          show-checkbox
          node-key="id"
          :expand-on-click-node="false"
          :highlight-current="true"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
            </span>
          </span>
        </el-tree>
        <!-- <el-tree
          :data="treeDatatwo"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
        </el-tree>-->

        <div class="button2">
          <router-link to="/ybgl?title=样本管理">
            <a-button class="btn3" type="primary">样本管理</a-button>
          </router-link>
          <a-button class="btn4" @click="clearnewData">清空样本</a-button>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";
let id = 1000;
export default {
  data() {
    const data = [];
    const newData = [];
    return {
      // treeData: [],
      // treeDatatwo: [],
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data)),

      newData: [],
      // newData: JSON.parse(JSON.stringify(newData)),
      
      //获取值
      defaultProps: {
        children: "children",
        label: "label",
      },
      //获取值

      checkList: ["中文"],
      pushNewData: []
    };
  },
  components: {
    headerComm
  },
  // watch: {
  //   checkedKeys(val) {
  //     console.log("onCheck", val);
  //     this.pushNewData = val;
  //   }
  // },
  methods: {
    //数据列表
    getTreeStructure(e) {
      this.axios
        .post(
          "yangben/GetTreeStructure.php",
          qs.stringify({filename:this.$store.state.filename, SampleName: "99453_sample" })
        )
        .then(res => {
          console.log(res)
          this.data = res.data.menu;
        });
    },
    //ssssss
    remove(node, data) {
      console.log(data)
      console.log(node)
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.fenleiID === data.fenleiID);
      children.splice(index, 1);
    },

    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
          </span>
        </span>
      );
    },
    // sssss
    //创建样本
//     getCheckedAll(){

//  return this.flatState.filter(function (e) {
//     if(e.node.indeterminate){
//         return e.node.indeterminate
//     }
//     return e.node.checked
// }).map(function (e) {
//     return e.node
// })

// },
    handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
        this.pushNewData.push(data)
        //  console.log(this.pushNewData)

      },
      
    getCheckedNodes() {
      // this.pushNewData=this.$refs.tree.getCheckedNodes()
         this.newData=this.pushNewData;
         console.log(this.newData)
    //  let aria_checked = $(e.currentTarget).attr("aria-checked");
    // console.log(aria_checked)
    },
    // 清空样本
    clearnewData(){
      this.newData=[]
    }

  },

  created() {
    this.getTreeStructure();
  }
};
</script>

<style lang='less' >
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-container {
  position: absolute;
  top: 138px;
  width: 98%;
  left: 1%;
  display: inline-block;
  text-align: center;
  margin-bottom: 50px;
  min-height: 600px;
}
.block {
  position: absolute;
  display: inline-block;
  padding: 20px;
  width: 49.5%;
  min-height: 403px;
  // border: 1px solid #ccc;
  background-color: #fff;
  // margin:0 -5px;

  .button1 {
    position: absolute;
    top: 32%;
    right: 102px;
    transform: translateY(-50%);
    button {
      position: absolute;
      // top: 50%;
      padding: 5px 10px;
    }
    .btn1 {
      right: -77px;
    }
    .btn2 {
      top: 50px;
    }
  }
  .button2 {
    position: absolute;
    top: 32%;
    right: 102px;
    transform: translateY(-50%);
    button {
      position: absolute;
      // top: 50%;
      padding: 5px 10px;
    }
    // .btn3 {
    // }
    .btn4 {
      right: -79px;
      top: 50px;
    }
  }

  .el-tree__empty-text {
    width: 100px;
  }

  .xzyy {
    text-align: left;
    margin: 10px 0;
    .el-checkbox-group {
      display: inline-block;
      margin: 20px;
    }
    .el-checkbox {
      margin-right: 15px;
    }
  }
}
.blockleft {
  left: 0;
}
.blockright {
  right: 1px;
}
.myp {
  height: 6px;
}
.h_tit {
  position: absolute;
  top: -65px;
  left: 0;
  text-align: left;
  h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(76, 75, 75, 0.85);
  }
  p {
    margin: 0;
  }
}
.ant-tree li {
  text-align: left;
}
</style>
